<template>
    <div>
      <Header></Header>
      <div class="admin_main">
      	<div class="admin-title">
      		<router-link class="admin-btn-add" to="/home_add">添加课程</router-link>
      	</div>
      	<div class="admin-table">
	      	<table>
	      		<tr>
	      			<th>id</th>
	      			<th>课程主题</th>
	      			<th>主讲人</th>
	      			<th>开始时间</th>
	      			<th>结束时间</th>
	      			<th>报名</th>
	      			<th>操作</th>
	      		</tr>
	      		<tr v-for="item in content" v-if="content!=''">
	      			<td>{{ item.id }}</td>
	      			<td>{{ item.title }}</td>
	      			<td>{{ item.author }}</td>
	      			<td>{{ item.start_time | formatDate }}</td>
	      			<td>{{ item.end_time | formatDate }}</td>
	      			<td><a href="javascript:;" class="table_ewmbtn" @click="show(item.id)" v-model="item.id">扫描二维码报名</a></td>
	      			<td>
	      				<router-link :to="{path: '/home_addPeople' + '?id='+item.id}" v-model="item.id">添加报名人</router-link>
	      				<router-link :to="{path: '/home_details' + '?id='+item.id}" v-model="item.id">报名人列表</router-link>
	      				<router-link :to="{path: '/home_amend' + '?id='+item.id}" v-model="item.id">修改</router-link>
                <a href="javascript:;" @click="del(item.id)">删除</a>
	      			</td>
	      		</tr>
            <tr v-if="content==''">
              <td colspan="6">暂无课程，去<router-link class="admin-btn-add" to="/home_add">添加</router-link></td>
            </tr>
	      	</table>
      	</div>
      </div>

      <div class="background" v-show="showText"></div>
      <div class="ewmbtn-box" v-show="showText">
      	<a href="javascript:;" class="ewmbtn-box-close iconfont icon-guanbi" @click="show"></a>
        <template>
          <!--<vue-qr style="width: 100%;height: 100%" :bgSrc='config.imagePath' :text="config.value" :size="200" :margin="0"></vue-qr>
          <vue-qr style="width: 100%;height: 100%" :logoSrc="config.imagePath" :text="config.value" :margin="0"></vue-qr>-->
          <vue-qr style="width: 100%;height: 100%" :bgSrc='config.imagePath' :logoSrc="config.imagePath" :text="config.value" :size="200" :margin="0"></vue-qr>

        </template>
      </div>

    </div>
</template>

<script>
import VueQr from 'vue-qr'
import Header from '../comments/header'
export default {
  name: 'home',
  components: {
    Header,
    VueQr
  },
  data () {
  	return {
  		content : '',
  		showText : false,
      config: {
        value: '',//显示的值、跳转的地址
        imagePath: require('../../public/style/images/logo.png')//中间logo的地址
      }
  	}
  },
  mounted () {
    this.$axios.get('/api')
      .then((res)=>{
        this.content = res.data;
      })
      .catch((err)=>{
        console.log(err);
      })
  },
  methods: {
    show (id) {
      //this.config.value = 'http://localhost:1688/home_ewm?id='+id;
      this.config.value = window.location.href+'home_ewm?id='+id;
      console.log(this.config.value)
      this.showText = !this.showText
    },
    del (id) {
      var c = confirm("删除课程会一起删除报名人列表数据。确定删除吗?");
      if(!c){
        return;
      }
      this.$axios.get('/api/home_del',{params: {id: id}})
        .then((res)=>{
          if(!res.data.code){
            alert(res.data.message);
            window.location.reload();
          }
        })
        .catch((err)=>{
          console.log(err);
        })
    }
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    }
  }
}
</script>
